<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
	<router-link to='/foo'>/foo</router-link>

	<div>
		<router-view></router-view>
	</div>
</div>
<script>
	const Foo = {
		template : `
			<div class="post">
		    <div class="loading" v-if="loading">
		      Loading...
		    </div>

		    <div v-if="error" class="error">
		      {{ error }}
		    </div>

		    <div v-if="post" class="content">
		      <h2>{{ post.title }}</h2>
		      <p>{{ post.body }}</p>
		    </div>
		  </div>
		`,
		data () {
	    return {
	      loading: false,
	      post: null,
	      error: null
	    }
	  },
	  created () {
	    // 组件创建完后获取数据，
	    // 此时 data 已经被 observed 了
	    this.fetchData()
	  },
	  watch: {
	    // 如果路由有变化，会再次执行该方法
	    '$route': 'fetchData'
	  },
	  methods: {
	    fetchData () {
	      this.error = this.post = null
	      this.loading = true
	      // replace getPost with your data fetching util / API wrapper
	      getPost(this.$route.params.id, (err, post) => {
	        this.loading = false
	        if (err) {
	          this.error = err.toString()
	        } else {
	          this.post = post
	        }
	      })
	    }
	  }
	}

	const router = new VueRouter({
		routes : [
			{ path:'/foo' ,component : Foo }
		]
	})

	const vm = new Vue({
		el : '#app',
		router,
		data : {}
	})
</script>	
</body>
</html>